<!-- 首页的栏目组件 -->
<template>
  <!-- 整体大布局-->
  <div class="icons header-swiper">
    <!-- 滑动区域-->
    <swiper ref='mySwiper' :options="iconOptions">
      <swiper-slide v-for="item in result" :key='item.id'>
          <swiper-slide class="icons-item" v-for="txt in item" :key='item.id'>
                <img :src="txt.imgURL" />
                <p>{{txt.til}}</p>
          </swiper-slide>
      </swiper-slide>
    </swiper>
    <!-- 景点门票-->
    <!-- <div class="icons-item" v-for="item in iconlist" :key='item.id'>
      <img :src="item.imgurl" />
      <p>{{item.title}}</p>
    </div> -->
  </div>
</template>

<script>
  export default{
    props:['iconlist'],
    data(){
      return{
        iconOptions:{
          // loop:true,
        }

      }
    },
    /* mounted(){
      new Swiper('.icons',{})
    }, */
    //计算属性
    computed:{
      result(){
        //1.设置一个空数组
        var arr=[];
        //2.forEach遍历   item、数组元素   index:下标
        this.iconlist.forEach((item,index)=>{
          //计算index下标/8的向下取整结果
          var idx=Math.floor(index/8);
          //判断计算结果相应的数组是否存在内容，如果没有声明一个空数组
          //[针对第一次循环，声明下标0和1分别是个数组]
          if(!arr[idx]){
            arr[idx]=[]
          }
          //将每次循环的元素item，添加到当前适合的下标数组内
          arr[idx].push(item);
        })
        return arr;
      }
    }
  }

</script>

<style scoped>
    .icons{
      width: 100%;
      overflow: hidden;
      padding-top: 0.2rem;
      background-color: white;
    }
    .icons-item{
      background-color: #ccccc;
      width: 25%;
      padding-bottom: 25%;
      height: 0;
      text-align: center;
      float: left !important;
    }
    .icons-item img{
      width: 1.1rem;
      height: 1.1rem;
      display: block;
      margin: 0 auto;
    }
    .icons-item p{
      font-size: 0.32rem;
      text-align: center;
      color: #212121;
      margin-top: 0.2rem;
    }
</style>
